// TODO(kara): update vars for desktop when MD team responds
@use '../core/style/button-common';
@use '../core/style/menu-common';
@use '../../cdk/a11y/a11y';

$vertical-padding: 8px !default;
$border-radius: 4px !default;
$submenu-indicator-size: 10px !default;

// Prevent rendering mat-menu as it can affect the flex layout.
mat-menu {
  display: none;
}

.mat-menu-panel {
  @include menu-common.base();
  max-height: calc(100vh - #{menu-common.$item-height});
  border-radius: $border-radius;
  outline: 0;

  // Give the menu a minimum height so that the user can't
  // collapse it to zero when they scroll away.
  min-height: menu-common.$item-height + $vertical-padding * 2;

  // Prevent users from interacting with the panel while it's animating. Note that
  // people won't be able to click through it, because the overlay pane will catch the click.
  // This fixes the following issues:
  //  * Users accidentally opening sub-menus when the `overlapTrigger` option is enabled.
  //  * Users accidentally tapping on content inside the sub-menu on touch devices, if the
  //    sub-menu overlaps the trigger. The issue is due to touch devices emulating the
  //    `mouseenter` event by dispatching it on tap.
  &.ng-animating {
    pointer-events: none;
  }

  @include a11y.high-contrast(active, off) {
    outline: solid 1px;
  }
}

// `:not(:empty)` allows for the menu to collapse to 0x0 when it doesn't have content.
.mat-menu-content:not(:empty) {
  padding-top: $vertical-padding;
  padding-bottom: $vertical-padding;
}

.mat-menu-item {
  @include button-common.reset();
  @include menu-common.item-base();
  position: relative;

  &[disabled] {
    // Usually every click inside the menu closes it, however some browsers will stop events
    // when the user clicks on a disabled item, **except** when the user clicks on a non-disabled
    // child node of the disabled button. This is inconsistent because some regions of a disabled
    // button will still cause the menu to close and some won't (see #16694). We make the behavior
    // more consistent by disabling pointer events and allowing the user to click through.
    pointer-events: none;
  }

  @include a11y.high-contrast(active, off) {
    $outline-width: 1px;

    // We need to move the item 1px down, because Firefox seems to have
    // an issue rendering the top part of the outline (see #21524).
    margin-top: $outline-width;

    &.cdk-program-focused,
    &.cdk-keyboard-focused,
    &-highlighted {
      outline: dotted $outline-width;
    }
  }
}

.mat-menu-item-submenu-trigger {
  @include menu-common.item-submenu-trigger(menu-common.$side-padding);
}

button.mat-menu-item {
  width: 100%;
}

// Increase specificity because ripple styles are part of the `mat-core` mixin and can
// potentially overwrite the absolute position of the container.
.mat-menu-item .mat-menu-ripple {
  @include menu-common.item-ripple;
}
